<template>
  <div class="page-min">
        <div class="sreach-view">
                <el-form ref="form"  label-width="90px">
                    <el-form-item label="隐患状态:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.latentDangerId" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in [{label:'已处理',value:'1'},{label:'未处理',value:'2'}]"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                    <el-form-item label="上报人:" style="width:250px">
                      <securityList v-model="form.data.reportStaffId"  /> 
                         
                    </el-form-item>
                    <el-form-item label="处理人:" style="width:250px">
                          <securityList v-model="form.data.handleStaffId"  />
                    </el-form-item>
                    <el-form-item label="客户类型:" style="width:250px">
                      <customeList v-model="form.data.doorNoGasId" />
                    </el-form-item>
                     <el-form-item label="隐患选择:" style="width:250px">
                          <el-select size="mini" 
                            clearable
                            v-model="form.data.latentDangerStatus" 
                            placeholder="请选择">
                            <el-option
                              v-for="item in []"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                    </el-form-item>
                     <el-form-item label="" prop="name" style="width:300px">
                        <el-button type="primary" size="mini"  icon="el-icon-search"  @click="btnQuery">查询</el-button>
                        <el-button size="mini"  icon="el-icon-scissors"  @click="btnQuery">重置</el-button>
                    </el-form-item>
                </el-form>
          </div>

        <gridTable title="安检隐患列表" :page="form"  :data="tableData" :columnList="columnList">
              <template #tools>
                    <el-button  size="mini"  class="el-icon-setting" type="primary" @click="btnSetting()">隐患配置</el-button>
                     <i class="el-icon-upload2" title="批量导入" />
                     <i class="el-icon-upload" title="下载" />
                </template>
                <template #actions="{row}">
                        <el-button  @click="btnDetail(row)"   type="text">查看</el-button>
                  </template>
              </gridTable>
            <el-dialog class="padding-dialog"  :visible.sync="dialogVisible" :close-on-click-modal="false"	 width="1100px"  :title="title">
               <dangerDetail :data="pData" />
            </el-dialog>
  </div>
</template>

<script>
import  {findLatentDangerList}  from '@/api/user'
import dangerDetail from './components/dangerDetail'
import securityList from './components/securityList'
import customeList from './components/customeList'
import gridTable from '@/components/eTable'

export default {
  components:{
    dangerDetail,
    gridTable,
    securityList,
    customeList
  },
  data() {
    return {
        tableData: [],
        dialogVisible:false,
        form: {
          data:{    
            "doorNoGasId": '',
            "handleStaffId": '',
            "latentDangerId": '',
            "latentDangerStatus": '',
            "reportStaffId": ''
            },
          page:1,
          pageSize:10,
          total:0
        },
        title:'',
        pData:null,
        columnList:[
          {label:'隐患状态',prop:'latentDangerStatus',iStrue:false},
          {label:'隐患上报时间',prop:'reportTime',width:'200',iStrue:true},
          {label:'上报人',prop:'reportStaffName',iStrue:true},
          {label:'上报人工号',prop:'reportStaffNo',iStrue:true},
          {label:'隐患大类',prop:'latentDangerCateName',iStrue:true},
          {label:'隐患类型',prop:'latentDangerCateNameX',iStrue:true},
          {label:'客户名称',prop:'customerName',iStrue:true},
          {label:'客户类型',prop:'customerCate',iStrue:true},
          {label:'客户户号',prop:'doorNo',iStrue:true},
          {label:'联系电话',prop:'customerPhone',iStrue:true},
          {label:'客户地址',prop:'address',width:'300',iStrue:true},
          {label:'燃气表号',prop:'meterNo',iStrue:true},
          {label:'处理时间',prop:'handleTime',iStrue:true},
          {label:'处理人',prop:'handleStaffName',iStrue:true}     
        ],
    }
  },
  created(){
    this.getPageList()
  },
  methods: {
    btnQuery(){
      this.getPageList()
    },
     getPageList(){
           findLatentDangerList(this.form).then((res)=>{
               if(res.code==0){
                 this.tableData = res.data.data
                 this.tableData.map((item)=>{
                    item.latentDangerStatus = item.latentDangerStatus==1?'已处理':'未处理'
                   return item
                 })
                 this.form.total = res.data.total
              }else{
                 this.tableData = []
              }
          })
     },
     btnSave(){
           this.$refs['formName'].validate((valid) => {
                if (valid) {
                    saveReceipts(this.saveForm).then((res)=>{
                      if(res.code=200){
                        this.$message({
                          message: '保存成功',
                          type: 'success'
                        });
                        this.dialogVisible = false
                         this.getPageList()
                      }else{
                        this.$message({
                          message: '保存失败',
                          type: 'error'
                        });
                      }
                    })
                } else {
                    return false;
                }
            });
     },
     handleSizeChange(val) {
         this.form.pageSize = val
        this.getPageList()
      },
      handleCurrentChange(val) {
        this.form.page = val
        this.getPageList()
      },
      btnDetail(item){
         this.title='详情'
        this.dialogVisible = true
        this.pData = item
      },
      btnSetting(){
        this.$router.push({ path: '/configuration' })
      }
  }
}
</script>

<style lang="scss" scoped>
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
}
.sreach-view{
    border-bottom:1px solid #EAEDF0;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    flex-flow: wrap;
     .el-form{
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
        .el-form-item{
          margin-bottom:6px;
        }
        }
        .el-form-item__label{
            color: #666;
            font-weight: normal;
        }
        .btn-open{
          cursor: pointer;
          margin-left:20px;
          font-size:14px;
          color:#1890ff;
          i{
            font-size:14px;
            color:#1890ff;
          }
        }
}
.tools-view{
  text-align: right;
  padding:10px 0;
  position: relative;
  .title{
    position:absolute;
    left:0;
    font-size:16px;
    color:#606266;
    font-weight: normal;
    height:30px;
    line-height:30px;
  }
  i{
    font-size:16px;
    cursor: pointer;
    color: #606266;
    margin-left:10px;
    border-radius:50%;
    height:30px;
    width:30px;
    text-align: center;
    line-height:30px;
    border:1px solid #dcdfe6;
  }:hover{
    color:#1890ff;
  }
}

.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}

</style>